<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <el-form
        :model="searchForm"
        ref="searchFormRef"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <el-form-item label="广商ID：">
          <el-input v-model="searchForm.b"></el-input>
        </el-form-item>
        <el-form-item label="日期：">
          <el-input v-model="searchForm.a"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
          <el-button icon="el-icon-delete">导出</el-button>
        </el-form-item>
      </el-form>

      <avue-crud
        ref="crud"
        :option="tableOption"
        :data="list"
        :page="page"
        v-model="form"
        :table-loading="listLoading"
        @on-load="getList"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="update"
        @row-save="create"
      >
        <template slot="menuLeft">
          <span>已结算总额：-278.02</span>
        </template>
        <template slot="f" slot-scope="scope">
          <span style="color:#AB82FF" @click="handleLoan()">{{scope.row.f}}</span>
        </template>
        <template slot="h" slot-scope="scope">
          <span style="color:#AB82FF"  @click="handleReturn()">{{scope.row.h}}</span>
        </template>
        <template slot="menu" slot-scope>
          <el-button
            v-if="menuPermissions_btn_remit"
            type="text"
            size="small"
            @click="handleCheck()"
          >查看记录</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      :visible.sync="dialogTableVisible"
      title="查看打款记录"
      width="40%"
      @close="checkItemVisible"
    >
      <avue-crud
        ref="crudItem"
        :page="page"
        :data="tableCheckItemData"
        v-model="form"
        :option="tableCheckItemOption"
      >
        <template slot="menuLeft" slot-scope>说明：</template>
      </avue-crud>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogLoanVisible"
      title="广商贷款管理订单列表 "
      width="70%"
      @close="LoanItemVisible"
    >
      <total-loan />
    </el-dialog>
    <el-dialog
      :visible.sync="dialogReturnVisible"
      title="广商贷款退款订单列表 "
      width="70%"
      @close="ReturnItemVisible"
    >
      <total-return />
    </el-dialog>
  </div>
</template>

<script>
import { tableOption } from "@/const/crud/credit/manageYes";
import { tableCheckItemOption } from "@/const/crud/credit/tableCheck";
import TotalLoan from "../components/TotalLoan";
import TotalReturn from "../components/TotalReturn";
export default {
  name: "manage-yes",
  components: {
    TotalLoan,
    TotalReturn,
  },
  data() {
    return {
      searchForm: {},
      tableOption: tableOption,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      list: [
        {
          a: "2020-01-23",
          b: "554（测试自营）",
          c: "工商银行",
          d: "测试",
          e: "11111111111111111111",
          f: 0.01,
          g: 0.0,
          h: 0.01,
          i: 0.01,
          j: 0.01,
        },
      ],
      listLoading: false,
      form: {},
      menuPermissions_btn_remit: true,
      //弹出框
      //查看记录
      dialogTableVisible: false,
      tableCheckItemData: [],
      tableCheckItemOption: tableCheckItemOption,
      //查看货款总额，退款总额
      dialogLoanVisible: false,
      dialogReturnVisible: false,
    };
  },
  methods: {
    getList() {},
    searchChange() {
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },

    refreshChange() {
      this.getList(this.page);
    },

    create(row, done, loading) {},
    update(row, index, done, loading) {},

    //弹出框
    //查看记录
    getCheckList() {},
    handleCheck: function () {
      this.dialogTableVisible = true;
    },
    checkItemVisible() {
      this.dialogTableVisible = false;
    },
    //贷款总额
    handleLoan: function () {
      this.dialogLoanVisible = true;
    },
    LoanItemVisible() {
      this.dialogLoanVisible = false;
    },
    //退款总额
     handleReturn: function () {
      this.dialogReturnVisible = true;
    },
    ReturnItemVisible() {
      this.dialogReturnVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>